<template>
  <div>
    <!-- 流程图 -->
    <div id="mountNode"></div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
export default {
  mounted() {
    this.getNode();
  },
  data() {
    return {
      nodeData: {
        // 点集
        nodes: [
          {
            id: "node1", // String，该节点存在则必须，节点的唯一标识
            x: 100, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            label: "起始点", // 节点文本
            size: 60 //大小
            // type: "diamond", //形状：默认圆形
            // //样式配置
            // style: {
            //   fill: "#666", //填充颜色
            //   stroke: "#fff", //节点的描边颜色
            //   lineWidth: 3, //描边宽度
            //   // lineDash : [2,4],//描边虚线，数组代表实、虚长度
            //   shadowColor: "yellow", //阴影颜色
            //   shadowBlur: 5, //阴影范围
            //   shadowOffsetX: 3, //阴影 x 方向偏移量
            //   shadowOffsetY: 2, //阴影 y 方向偏移量
            //   opacity: 0.5, //设置绘图的当前 alpha 或透明值
            //   fillOpacity: 0.3, //设置填充的 alpha 或透明值
            //   cursor: "pointer", //鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持
            // },
            // label配置
            // labelCfg: {
            //   position: "bottom", //文本位置，默认
            //   offset: 5, //偏移量
            //   //文字样式
            //   style: {
            //     fill: "orange",
            //     stroke: "#666",
            //     fontSize: 14,
            //   },
            // },
            // 连接点位置
            // anchorPoints: [
            //   [0, 1],
            //   [0.5, 1],
            // ],
          },
          {
            id: "node2.1", // String，该节点存在则必须，节点的唯一标识
            x: 280, // Number，可选，节点位置的 x 值
            y: 100, // Number，可选，节点位置的 y 值
            label: "途径点", // 节点文本
            size: [60, 40],
            type: "rect"
            // 该节点可选的连接点集合，该点有两个可选的连接点
            // anchorPoints: [
            //   [0.5, 0],
            //   [1, 0.5],
            // ],
          },
          {
            id: "node2.2", // String，该节点存在则必须，节点的唯一标识
            x: 280, // Number，可选，节点位置的 x 值
            y: 300, // Number，可选，节点位置的 y 值
            label: "途径点", // 节点文本
            size: [60, 40],
            type: "rect"
            // 该节点可选的连接点集合，该点有两个可选的连接点
            // anchorPoints: [
            //   [0.5, 0],
            //   [1, 0.5],
            // ],
          },
          {
            id: "node2", // String，该节点存在则必须，节点的唯一标识
            x: 300, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            label: "途径点", // 节点文本
            size: 60
            // 该节点可选的连接点集合，该点有两个可选的连接点
            // anchorPoints: [
            //   [0.5, 0],
            //   [1, 0.5],
            // ],
          },
          {
            id: "node3", // String，该节点存在则必须，节点的唯一标识
            x: 500, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            label: "目标点", // 节点文本
            size: 60
          }
        ],
        // 边集
        edges: [
          {
            source: "node1", // String，必须，起始点 id
            target: "node2", // String，必须，目标点 id
            label: "我是连线1", // 边的文本
            // type : 'arc',
            labelCfg: {
              refY: 10
            },
            style: {
              //   endArrow: true,//结束箭头
              endArrow: {
                path: G6.Arrow.triangle(10, 20, 5),
                d: 5
              }, //线结束样式
              startArrow: false //开始箭头
            }
          },
          {
            source: "node2", // String，必须，起始点 id
            target: "node3", // String，必须，目标点 id
            label: "我是连线2", // 边的文本
            labelCfg: {
              refY: 10
            },
            style: {
              endArrow: {
                path: G6.Arrow.triangleRect(15, 15, 15, 3, 5, 5),
                d: 5
              }
            }
          },
          {
            source: "node2", // String，必须，起始点 id
            target: "node2.1", // String，必须，目标点 id
            label: "" // 边的文本
          },
          {
            source: "node2", // String，必须，起始点 id
            target: "node2.2", // String，必须，目标点 id
            label: "" // 边的文本
          }
        ]
      }
    };
  },
  methods: {
    getNode() {
      const graph = new G6.Graph({
        container: "mountNode", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: 800, // Number，必须，图的宽度
        height: 500, // Number，必须，图的高度
        //默认配置，节点配置优先级大于默认配置
        defaultNode: {
          type: "circle",
          anchorPoints: [
            [1, 0.5],
            [0, 0.5],
            [0.5, 0],
            [0.5, 1],
          ]
          // 其他配置
        },
        //节点状态样式
        nodeStateStyles: {
          // 各状态下的样式，平铺的配置项仅在 keyShape 上生效。需要在其他 shape 样式上响应状态变化则写法不同，参见上文提到的 配置状态样式 链接
          hover: {
            fillOpacity: 0.1,
            lineWidth: 10,
            fill: "#d3adf7"
          }
        }
      });
      graph.data(this.nodeData); // 读取 Step 2 中的数据源到图上
      graph.render(); // 渲染图
      // 监听鼠标进入节点事件
      graph.on("node:mouseenter", evt => {
        const node = evt.item;
        // 激活该节点的 hover 状态
        graph.setItemState(node, "hover", true);
      });
      // 监听鼠标离开节点事件
      graph.on("node:mouseleave", evt => {
        const node = evt.item;
        // 关闭该节点的 hover 状态
        graph.setItemState(node, "hover", false);
      });
    }
  }
};
</script>

<style>
</style>